<template>
	<div class="system-container">
		<div class="table-search">
			<n-form
				ref="formRef"
				inline
				label-placement="left"
				:model="searchForm"
				class="search-form"
			>
				<n-form-item :label="$t('common.userName')" path="name">
					<ln-input v-model:value="searchForm.userName" clearable />
				</n-form-item>
				<n-form-item :label="$t('common.phone')" path="name">
					<ln-input v-model:value="searchForm.phone" clearable />
				</n-form-item>
				<n-form-item>
					<n-button type="primary" @click="handleSearchClick">{{
						$t('btn.query')
					}}</n-button>
				</n-form-item>
			</n-form>

			<div>
				<n-button type="primary" @click="handleAddClick">{{ $t('btn.add') }}</n-button>
			</div>
		</div>

		<ln-data-table
			class="mytable"
			:columns="columns"
			:data="tableData"
			:pagination="paginationReactive"
		/>

		<Modal
			v-model:show="modalForm.modalVisible"
			:modal-type="modalForm.modalType"
			:modal-data="modalForm.modalData"
			@update="modalForm.modalType = ModalTypeEnum.update"
			@close="handLnModalClose"
		/>
	</div>
</template>

<script lang="tsx" setup>
import { useI18n } from 'vue-i18n';
import { useTable } from '@/hooks/useTable';
import type { DataTableColumns, DataTableColumn } from 'naive-ui';
import { LnButton } from '@/components/LnButton';
import { useDialog, useMessage, NSwitch, NTime } from 'naive-ui';
import { useRoleStore } from '@/store/modules/role';

import { getUserPageList, deleteUser, updateUserStatus } from '@/api/system/account';
import type { GetUserPageListReq, UserListRow } from '@/api/system/account';

import Modal from './Modal.vue';
import { ModalTypeEnum, ModalTypeParam } from '@/utils/enum';

const { t } = useI18n();
const dialog = useDialog();
const message = useMessage();
// store获取roleList
const roleStore = useRoleStore();
roleStore.getCurrentRoleList();

// 搜索
const searchForm = reactive<GetUserPageListReq>({
	userName: '',
	phone: '',
});
function handleSearchClick() {
	paginationReactive.page = 1;
	getTableList();
}
// table
const actionColumn: DataTableColumn<UserListRow> = {
	title: t('common.operation'),
	key: 'action',
	width: '160',
	render(row) {
		return (
			<div class="table-action">
				<LnButton onClick={() => handleDetailClick(row)}>{t('btn.detail')}</LnButton>
				<LnButton onClick={() => handleUpdateClick(row)}>{t('btn.update')}</LnButton>
				<LnButton type="danger" onClick={() => handleDeleteClick(row)}>
					{t('btn.delete')}
				</LnButton>
			</div>
		);
	},
};
const columns: DataTableColumns<UserListRow> = [
	{
		title: t('common.loginName'),
		key: 'loginName',
	},
	{
		title: t('common.userName'),
		key: 'userName',
	},
	{
		title: t('common.phone'),
		key: 'phone',
	},
	{
		title: t('common.roleName'),
		key: 'roleName',
	},
	{
		title: t('common.accountState'),
		key: 'status',
		render(row) {
			return (
				<NSwitch
					value={row.status}
					checked-value={0}
					onUpdate:value={() => switchClick(row)}
					unchecked-value={1}
				/>
			);
		},
	},
	actionColumn,
];
const { tableData, paginationReactive, getTableList } = useTable<UserListRow>({
	request: getUserPageList,
	requestParam: searchForm,
	resFormatter: list => {
		list.map(item => {
			const roleNameArr = item.roles!.map(roleItem => roleItem.name);
			const roleIdArr = item.roles!.map(roleItem => roleItem.id!);
			item.roleName = String(roleNameArr);
			item.roleIds = roleIdArr;
		});
		return list;
	},
});
getTableList();

// modal
const modalForm = reactive({
	modalVisible: false,
	modalType: ModalTypeEnum.add,
	modalData: {},
});
function handLnModalClose(data) {
	if (data) {
		getTableList();
	}
	modalForm.modalVisible = false;
}

/* ******操作****** */
// switch
function switchClick(row: UserListRow) {
	dialog.warning({
		title: t('msg.warning'),
		content: t('msg.normalTip'),
		positiveText: t('btn.confirm'),
		negativeText: t('btn.cancel'),
		onPositiveClick: async () => {
			const params = {
				id: row.id!,
				status: row.status === 1 ? 0 : 1,
			};
			await updateUserStatus(params);
			getTableList();
			message.success(t('msg.operationCompleted'));
		},
	});
}
// add
function handleAddClick() {
	modalForm.modalType = ModalTypeEnum.add;
	modalForm.modalVisible = true;
}
// detail
function handleDetailClick(row: UserListRow) {
	modalForm.modalType = ModalTypeEnum.detail;
	modalForm.modalData = { ...row };
	modalForm.modalVisible = true;
}
// update
function handleUpdateClick(row: UserListRow) {
	modalForm.modalType = ModalTypeEnum.update;
	modalForm.modalData = { ...row };
	modalForm.modalVisible = true;
}
// delete
function handleDeleteClick(row: UserListRow) {
	dialog.warning({
		title: t('msg.warning'),
		content: t('msg.normalTip'),
		positiveText: t('btn.confirm'),
		negativeText: t('btn.cancel'),
		onPositiveClick: async () => {
			const params = {
				id: row.id!,
				loginName: row.loginName,
			};
			await deleteUser(params);
			getTableList();
			message.success(t('msg.deleteCompleted'));
		},
	});
}
</script>

<style lang="scss" scoped>
.system-container {
	display: flex;
	height: 100%;
	background-color: #343946;
	box-sizing: border-box;
	flex-direction: column;
}
</style>
